<!--  -->
<template>
  <div>
    <div ref="richtextContainer" :class="['flex-y','richtext-view-box' ,showUp ? 'show-box' : 'hide-box']" v-resize="handleResize">
      <!-- <div v-if="value" @click="showDetail" class="link-text">查看全部</div> -->
      <!-- <el-button
        v-if="value"
        @click="showDetail"
        type="text"
        :loading="loading"
        style="padding: 0"
        >查看全部</el-button
      >
      <div v-else>暂无内容</div>
      <base-modal
        title="富文本详情"
        :show.sync="visible"
        width="700px"
        @closed="reset"
      >
        <form-richtext
          :field="field"
          :readonly="true"
          :value="renderValue"
        ></form-richtext>
      </base-modal> -->
      <richText
        class="flex-1"
        ref="richTextRef"
        v-if="value"
        :readonly="true"
        :field="field"
        :value="value"
        :show-up="showUp"
      ></richText>
      <div v-else>{{$t('common.base.noData')}}</div>
    </div>
    <div v-if="value&&showCollapse" class="richtext-action" @click="showUp = !showUp">
      {{ showUp ? $t('common.base.collapse') : $t('common.base.expand') }}
      <i :class="['iconfont', showUp?'icon-Icon_up':'icon-down']"/>
    </div>
  </div>
</template>

<script>
import { getRichTextContent } from '@src/api/SystemApi';
import richText from './index.vue';
export default {
  name: 'FormRichTextView',
  props: {
    value: {
      type: String,
      default: '',
    },
    field: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      renderValue: null,
      visible: false,
      loading: false,
      showUp: false,
      showCollapse:false
    };
  },
  components: {
    richText,
  },
  methods: {
    /** 富文本超过一定高度显示展开 */
    handleResize() {
      this.$nextTick(()=>{
        this.showCollapse = this.$refs.richtextContainer?.scrollHeight > 160
      })
    },
    showDetail() {
      if (this.renderValue) {
        return (this.visible = true);
      }
      this.loading = true;

      getRichTextContent({
        ids: [this.value],
      })
        .then(res => {
          if (res.code == 0 || res.status == 0) {
            let richtextCon = '';
            richtextCon = res.result[0].content;
            this.renderValue = richtextCon;
            this.visible = true;
          } else {
            throw res;
          }
        })
        .catch(err => {
          console.warn('http erro', err);
          this.$notify.error({
            title: 'error',
            message: err.message,
            duration: 2000,
          });
        })
        .finally(() => {
          setTimeout(() => {
            this.loading = false;
          }, 500);
        });
    },
    reset() {
      this.visible = false;
    },
    // 富文本内容去掉标签只显示文本
    // contentHtml(content) {
    //   content =  content.replace(/(\n)/g, "").replace(/(\t)/g, "").replace(/(\r)/g, "").replace(/<\/?[^>]*>/g, "").replace(/\s*/g, "");  
    //   return content
    // }
  },
  directives: {
    resize: {
      inserted: function(el, binding) {
        const callback = binding.value;
        const observer = new ResizeObserver(entries => {
          callback(entries[0].contentRect.height);
        });
        observer.observe(el);
      }
    }
  }

};
</script>
<style lang="scss" scoped>
// .sticky-header{
//   position:sticky;
//   top:0;
//   background:#fff;
// }
.richtext-view-box{
  position: relative;
}
.show-box {
  // max-height: 820px;
}
.hide-box {
  max-height: 160px;
  overflow-y:hidden;
}
.richtext-action{
  height: 24px;
  background: #F5F5F5;
  color:#595959;
  cursor: pointer;
  margin-top: 4px;
  display: flex;
  align-items:center;
  justify-content:center;
  i{
    color:#595959!important;
  }
  &:hover{
    color:#262626;
    i{
      color:#262626!important;
    }
  }
}
</style>
